
//a. 卸载安装包 cnpm uninstall vue-loader -D 
//b. 自动导入 bundle.js 自动在webpack.config.dev.js 中生成index.html 我们看不到
//c. 插件中的内容都是new 出来的
//d. error: Connot find module   >>> 干掉node_modules  >>>cnpm i 会把de,dev依赖的包全部下载
//e. 生产阶段, 加入指令, 自动生成 min.js
//f. npm run dev  || 在package.json中 "scripts" 中 配置 "dev" :"指令"
//d. npm init -y 生成package.json  ||| 还可以配置脚本


//热更新,热重载,热替换


// 1. 导包  ES5 和 ES6 两种写法
import Vue from 'vue'
//es5 var Vue = require('vue')
import axios from 'axios'
import moment from 'moment'
import ElementUI from 'element-ui'
//导入vue-router
import VueRouter from 'vue-router'
import VueLazyLoad from 'vue-lazyload'

//以下是全局导入, 用到的组件不多, 要用按需导入
import iView from 'iview'

//导入vuex
import Vuex from 'vuex'

// console.log(iView)
// Vue.use(iView);
Vue.use(Vuex)
Vue.use(VueRouter)
Vue.use(ElementUI)
Vue.use(VueLazyLoad,{
    loading:'src/statics/site/images/01.gif'
})


Vue.prototype.$axios = axios
axios.defaults.baseURL = "http://39.108.135.214:8899/"
axios.defaults.withCredentials = true


Vue.filter('dateFmt',(input,formatString="YYYY-MM-DD") =>{
    return moment(input).format(formatString)
})
// 2.导入根组件
import App from './App.vue'

//导入css全局用到的样式
import 'element-ui/lib/theme-chalk/index.css'
import "./statics/site/css/style.css"

import layout from './components/layout.vue'
import goodslist from './components/goods/goodslist.vue'
import goodsinfo from './components/goods/goodsinfo.vue'
import shopcart from './components/shopcart/shopcart.vue'
import order from './components/order/order.vue'
import login from './components/account/login.vue'
import payOrder from './components/pay/payOrder.vue'
import pcPaySuccess from './components/pay/pcPaySuccess'
//es5 App = require('./App.vue') 
// 3.渲染根组件    >>> --save/-S  生产依赖
// a. 第一个安装包: vue.js  安装方式: cnpm i vue --save
// new Vue({
//     el:'#app',
//     render:function(createElement){
//         return createElement(App)
//     }
// })

var router =new VueRouter({
    routes:[
        {path:'/',redirect:'/site/goodslist'},
        {path:'/site',component:layout,children:[
            {name:'goodslist',path:'goodslist',component:goodslist},
            {path:'goodsinfo/:goodsId',component:goodsinfo},
            {path:'shopcart',component:shopcart},
            {path:'login',component:login},
            {path:'order/:ids',component:order,meta:{needLogin:true}},
            {path:'payOrder/:orderid',component:payOrder,meta:{needLogin:true}},
            // {path:'order/:ids',component:order}
            {path:'pcPaySuccess',component:pcPaySuccess,meta:{needLogin:true}},
        ]}
    ]
})

router.beforeEach((to, from, next) => {
    //在登录成功之后, 跳转到登录前的页面
    if(to.path != '/site/login'){
        localStorage.setItem('lastVisitPath',to.path)
    }

    //1、判断即将跳转的组件中的路径(to)里面是否需要进行权限验证，如果需要权限验证，就发送请求给后台
    //如果不需要权限验证，直接跳过
    if(to.meta.needLogin){//需要登录的组件
        //判断登录
        const url = "site/account/islogin"

        axios.get(url).then(response=>{
            console.log(response.data)
            if(response.data.code==='nologin'){
                //跳转到登录页面上面去
                router.push({path:'login'})
            }else{
                next()
            }
        })
    }else{
        next()
    }
})

//导入localStorageTool中的方法
import {addLocalGoods,
    getTotalCount,
    updateLocalGoods,
    deleteLocalGoodsById,
    deleteLocalGoodsByIds
} from './common/localStorageTool.js'

//全局数据存储
const store = new Vuex.Store({
    //存储数据
    state:{
        buycount:0
    },
    //获取数据
    getters:{
        getBuyCount(state){
            if(state.buycount>0){
                return state.buycount
            }else{
                return getTotalCount()
            }
        }
    },
    //操作数据, 增,删,改
    mutations:{
        addGoods(state,goodsObj){
            state.buycount = addLocalGoods(goodsObj)
        },
        updateGoods(state,changedGoods){
            //修改本地的数量, 统计总数量, 赋值给右上角购物车
            state.buycount = updateLocalGoods(changedGoods)
        },
        deleteGoodsById(state,goodsId){
            state.buycount = deleteLocalGoodsById(goodsId)
        },
        deleteGoodsByIds(state,goodsids){//约定，传递过来的goodsids是一个数组[87,92]
            //根据ids删除本地的商品
            state.buycount = deleteLocalGoodsByIds(goodsids)
        }
    }
})


new Vue({
    el:'#app',
    router,
    store,
    render:h =>h(App)
})

//4. 第二个安装包: vue-loader (1)  一起安装了4个包
    //安装vue-loader 需要依赖 css-loader (2) vue-template-compiler (3)
        //顺便安装 style-loader  (4)
    //*** de里的vue版本号 要和 dev里的template版本号 一致 

//5. 编写 webpack.config.dev.js
    // >>> 让webpack 支持打包vue后缀的文件

//6. 第三个安装包: html-webpack-plugin (1) webpack (2) webpack-dev-server (3)
    // >>> 使用 html-webpack-plugin 生成 index.html \
        // 在项目根目录文件下创建一个参考文件  
        // *** 插件会自动导入 bundle.js 
    // >>> 在webpack.config.dev.js 中配置 plugins

//7. 开启 webpack-dev-server 服务器, 默认端口 8080
    //打包bundle.js, 并把bundle.js和 index.html 发布到内部的node服务器中去